<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登录</title>
	<link rel="stylesheet" href="./component/pear/css/pear.css" />
	<link rel="stylesheet" href="./admin/css/other/login.css" />
</head>

<body background="../admin/images/background.svg">
	<form class="layui-form">
		<div class="demo-login-container">
			<div class="layui-form-item">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-username"></i>
					</div>
					<input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
						lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-password"></i>
					</div>
					<input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
						lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-row">
					<div class="layui-col-xs7">
						<div class="layui-input-wrap">
							<div class="layui-input-prefix">
								<i class="layui-icon layui-icon-vercode"></i>
							</div>
							<input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码"
								lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
						</div>
					</div>
					<div class="layui-col-xs5">
						<div style="margin-left: 10px;">
							<img src="https://www.oschina.net/action/user/captcha"
								onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
				<a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
			</div>
			<div class="layui-form-item">
				<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
			</div>
			<div class="layui-form-item demo-login-other">
				<label>社交账号登录</label>
				<span style="padding: 0 21px 0 6px;">
					<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
					<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"
							style="color: #4daf29;"></i></a>
					<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
				</span>
				或 <a href="#reg">注册帐号</a>
			</div>
		</div>
	</form>
	<!-- 资 源 引 入 -->
	<script src="./component/layui/layui.js"></script>
	<script src="./component/pear/pear.js"></script>
	<script>
		layui.use(['form', 'button', 'popup'], function () {
			var form = layui.form;
			var button = layui.button;
			var popup = layui.popup;

			// 登 录 提 交
			form.on('submit(login)', function (data) {

				/// 验证

				/// 登录

				/// 动画
				button.load({
					elem: '.login',
					time: 1500,
					done: function () {
						popup.success("登录成功", function () {
							location.href = "./index.html"
						});
					}
				})

				return false;
			});
		})
	</script>
</body>

</html>